<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div >
				<div id="app"> 
					<table border="1px" class="table table-striped   text-center">
						<tr style="height: 20px;" class="table-primary">
							<td>订单编号</td>
							<td>商品名称</td>
							<td>商品数量</td>
							<td>金额(元)</td>
							<td>服务费(元)</td>
							<td>详情介绍</td>
							<td>商品图片</td>
							<td>总价</td>
							
						</tr>
						<tr style="height: 50px;"  class="table-success">
							<td>{{order.order_no}}</td>
							<td><a href="#" @click="godatail(product)">{{product.name}}</a></td>
							<td>{{product.num}}</td>
							<td>{{order.total_money}}</td>
							<td>{{order.service_charge}}</td>
							<td style="width: 30%;">{{product.details}}</td>
							<td><img v-bind:src="product.picture" style="width:30px;height:30px;"/></td>
							<td>{{totalprice}}</td>
						</tr>
					</table>
					<div v-if="order.status=='0' ">
						<span style="margin-left: 30%;">请选择收货地址地址</span><br>
						<select  v-model="selected" style="margin-left:30%; height: 40px; width: 400px;">
							<option disabled value="">请选择地址</option>
							<option v-bind:value="address.province+address.city+address.county+address.detailed+address.telphone+address.accept" v-for="address in addresses">{{address.province}}{{address.city}}{{address.county}}{{address.detailed}}{{address.telphone}}{{address.accept}}</option>
						</select><br/>
						<span style="margin-left: 30%;">你选择的地址是:<span id="selected">{{selected}}</span></span>
						<p></p>
						<p style=" margin-left: 35%;color:red;">剩余支付时间&emsp;{{hr}}小时 {{min}}分钟 {{sec}}秒</p>
						<span style=" margin-left: 40%;"><button class="btn btn-success" @click="pay(order)">前往支付</button></span>
					</div>
					<div v-else></div>
				</div>
	<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			orderid:'',
			product:'',
			order:'',
			addresses:[],
			totalprice:'',
			selected:'',
			day:'',
			hr:'',
			min:'',
			sec:'',
			endtime:''
		},
		//页面加载完后触发
		mounted(){
			 var query = window.location.search.substring(1);
			 if (query.length > 0) {
				  this.orderid = query.substring(query.indexOf('=') + 1).toUpperCase();
				   
			 }
			axios.get("order/findorderdetail?orderid="+this.orderid).then(res => {
				this.product = res.data.product;
				this.addresses = res.data.addresses;
				this.order = res.data.orders;
				this.totalprice=this.order.total_money+this.order.service_charge;
				this.endtime=res.data.orders.remaining_time;
				if(this.order.status!=1){
					this.countdown(this.endtime);
				}
				
			});
			
			
		},
		methods:{
			godatail:function(product){
				window.location.href="datail.html?pid="+product.p_id;
			},
			pay:function(order){
				//window.location.href="alipay.html?no="+order.order_no+"&total_money="+order.total_money+"&o_id="+order.o_id;
				var sessionStorage = window.sessionStorage;   //浏览器本地的临时数据库
				sessionStorage.setItem("order_no", order.order_no);
				sessionStorage.setItem("total_money", order.total_money);
				sessionStorage.setItem("o_id", order.o_id);
				window.location.href="alipay.html";
			},
			countdown (endtime) {
			      const end = Date.parse(new Date(endtime));
			      const now = Date.parse(new Date());
			      const msec = end - now;
			      if(msec<0){
			    	alert("已超过支付时间");
			        window.location.href="order.html";
			    	return;
			      };
			      var day = parseInt(msec /  1000 / 60 / 24/ 60 % 60)
			      var hr = parseInt(msec / 1000 / 60 / 60 % 60)
			      var min = parseInt(msec / 1000 / 60 % 60)
			      var sec = parseInt(msec / 1000 % 60)
			      this.day = day
			      this.hr = hr > 9 ? hr : '0' + hr
			      this.min = min > 9 ? min : '0' + min
			      this.sec = sec > 9 ? sec : '0' + sec
			      const that = this
			      if(min>=0 && sec>=0){
			        //倒计时结束关闭订单
			        if(min==0 && sec==0){
			        	alert("已超过支付时间");
			        	window.location.href="order.html";
			          return;
			        }
			        setTimeout(function () {
			          that.countdown(endtime)
			        }, 1000)
			      }
			    }
		}
	});
</script>
</body>
</html>